<style lang="less" scoped>
    @import './SidebarMenu.less';
</style>
<style>
    .ivu-menu-submenu-title-icon {
        right: 9px !important;
    }
</style>
<template>
    <div class="sidebar-shrink">
        <Menu :theme='theme' ref="side_menu" :active-name="current_page_name" @on-select="changeMenu"
              :open-names="[count]" accordion>
            <template v-for="(item,index) in menuList">
                <Submenu v-if="hasAuthority(item.authority)" :name="index">
                    <template slot="title">
                        <Icon :type="item.icon" size='18'></Icon>
                        <span class="layout-text" >{{ item.title }}</span>
                    </template>
                    <template v-for="(child,j) in item.children">
                        <MenuItem v-if="hasAuthority(child.authority)" @click.native="changeopen(index)"
                                  :name="child.path">
                            <Icon :type="child.icon" size='18'></Icon>
                            <span class="layout-text" >{{ child.title }}</span>
                        </MenuItem>
                    </template>
                </Submenu>
            </template>
        </Menu>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import Cookies from 'js-cookie';

    export default {
        inject: ['reload'],
        data() {
            return {
                theme: 'dark',
            }
        },
        name: 'sidebarMenu',
        props: [
            'hideMenuText',
            'timershow'
        ],
        watch: {
            projectId: function () {
                this.loadDashboards();
            }
        },
        computed: mapState(['menuList', 'pageOpenedList', 'todos', 'current_page_name', 'count', 'projectId']),
        methods: {
            /**
             * 切换打开导航的样式
             */
            changeopen(openid) {
                this.$store.commit('count', '');
                this.$store.commit('count', openid);
            },
            changeMenu(active) {
                let routerName = "";
                let params = {};
                if (Cookies.get('cachePage')) {
                    let page_count = [];
                    page_count = Cookies.get('cachePage');
                    page_count = JSON.parse(page_count);
                    if (page_count.indexOf(active) == -1) {
                        page_count.unshift(active);
                    }
                    Cookies.set('cachePage', page_count, {expires: 7});
                } else {
                    let page_count = [];
                    page_count.unshift(active);
                    Cookies.set('cachePage', page_count, {expires: 7});
                }
                for (let i = 0; i < this.menuList.length; i++) {
                    if (this.menuList[i].children === undefined || this.menuList[i].children.length === 0) {
                        continue;
                    }
                    if (active == this.menuList[i].children[0].path && this.menuList[i].children.length == 1) {
                        let children = this.menuList[i].children[0];
                        if (JSON.stringify(this.pageOpenedList).indexOf(JSON.stringify(children)) == -1) {
                            this.pageOpenedList.push(children);
                        }
                        routerName = children.name;
                        params = children.params;
                    } else if (this.menuList[i].children.length != 1) {
                        for (let j = 0; j < this.menuList[i].children.length; j++) {
                            if (active == this.menuList[i].children[j].path) {
                                let children = this.menuList[i].children[j];
                                if (JSON.stringify(this.pageOpenedList).indexOf(JSON.stringify(children)) == -1) {
                                    this.pageOpenedList.push(children);
                                }
                                routerName = children.name;
                                params = children.params;
                            }

                        }

                    }
                }
                this.$store.commit('pageOpenedList', this.pageOpenedList);
                this.$router.push({
                    path: active,
                    params: params
                });
                this.reload();
            },
            hasAuthority(authority) {
                return this.$sessionStore.fetchAuthority().includes(authority);
            },
            loadReportCategories() {
                this.$axios.get(this.$api.report + "/category",
                    {
                        headers: {
                            "Authorization": "Bearer " + this.$sessionStore.fetch(),
                            "Accept": "application/json"
                        },
                    }
                ).then(response => {
                    if (response.status === 200) {
                        this.$store.commit('updateReportCategory', response.data);
                        this.$store.commit('current_page_name', this.current_page_name);
                        this.$nextTick(() => {
                          if (typeof this.$refs.side_menu !== 'undefined'){
                            this.$refs.side_menu.updateActiveName();
                          }
                        })
                    }
                }).catch(error => {
                    console.log(error);
                }).finally(() => {

                });
            },
            loadDashboards() {
                this.$axios.get(this.$api.report + "/dashboard",
                    {
                        headers: {
                            "Authorization": "Bearer " + this.$sessionStore.fetch(),
                            "Accept": "application/json"
                        },
                        params: {
                            projectId: this.$store.state.projectId
                        }
                    }
                ).then(response => {
                    if (response.status === 200) {
                        this.$store.commit('updateDashboard', response.data);
                        this.$store.commit('current_page_name', this.current_page_name);
                        this.$nextTick(() => {
                          if (typeof this.$refs.side_menu !== 'undefined'){
                            this.$refs.side_menu.updateActiveName();
                          }
                        })
                    }
                }).catch(error => {
                    console.log(error);
                }).finally(() => {

                });
            }
        },
        created() {
            this.loadDashboards();
            this.loadReportCategories();
        }

    };
</script>




